<template>
	<div class="fa">
		<!-- 头部 -->
		<div class="wrap">
			<div class="header flex">
				<!-- logo -->
				<img class="logo" src="./img/logo.png" alt="" />
				<!-- 导航 -->
				<div class="nav flex">
					<a
						:class="{ currs: curr == val }"
						v-for="(val, index) in navs"
						:key="val"
						@click="
							{
								;(curr = val), (order = index)
							}
						"
					>
						<div class="nav1">
							<div class="nav2">
								<div class="nav3">{{ val }}</div>
							</div>
						</div>
					</a>
				</div>
				<!-- 语言 -->
				<div class="language">
					<a class="china">
						<div>中</div>
					</a>
					<a class="en">
						<div>EN</div>
					</a>
				</div>
			</div>
		</div>
		<Home v-show="order == 0"></Home>
		<Enter v-show="order == 1"></Enter>
		<Clear v-show="order == 2"></Clear>
		<Wash v-show="order == 3"></Wash>
		<Investor v-show="order == 5"></Investor>
		<Footer></Footer>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navs: [
				'首页',
				'走进蓝月亮',
				'洁净之家',
				'科学洗涤',
				'加入我们',
				'投资者关系',
				'联系我们',
			],
			show: true,
			order: 0,
			curr: '首页',
		}
	},
	components: {
		Footer: require('./Footer').default,
		Home: require('./Home').default,
		Enter: require('./Enter').default,
		Clear: require('./Clear').default,
		Wash: require('./Wash').default,
		Investor: require('./Investor').default,
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.flex {
	display: flex;
}
.fa {
	.wrap {
		.header {
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 2000;
			background-color: #fff;
			color: #333;
			min-width: 1080px;
			// logo
			.logo {
				width: 96px;
				cursor: pointer;
			}
			// 导航
			.nav {
				min-width: 826px;
				.currs {
					color: #1d3e97;
				}
				a {
					color: #333;
					font-size: 16px;
					cursor: pointer;
					height: 80px;
					line-height: 80px;
					min-width: 80px;
					font-weight: 500;
					position: relative;
					flex: 1;
					text-align: center;
					.nav1 {
						.nav2 {
							display: flex;
							align-items: center;
							height: 80px;
							font-weight: 400;
							text-align: center;
							justify-content: center;
							.nav3 {
								max-width: 95%;
								line-height: 22px;
							}
							img {
								width: 12px;
								margin-left: 5px;
							}
						}
					}
				}
			}
			// 语言
			.language {
				margin-left: 7px;
				color: #333;
				font-weight: 500;
				display: flex;
				align-items: center;
				font-size: 14px;
				line-height: 80px;
				position: relative;
				cursor: pointer;
				height: 80px;
				justify-content: center;
				.china {
					color: #333;
					div {
						color: #333;
						margin: 0 5px;
					}
				}
				.en {
					color: #333;
					div {
						margin: 0 5px;
						color: #ccc;
					}
				}
			}
		}
	}
}
</style>